<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基于jq的日历签到功能</title>
    <script src="/js/jquery/jquery.min.js"></script>
   <style>
       * {
           margin: 0;
           padding: 0;
           list-style: none;
       }

       .home {
           width: 100%;
       }

       .thead {
           width: 100%;
       }

       .thead li {
           float: left;
           width: 14.28%;
           text-align: center;
       }

       .home tbody>tr>td {
           width: 14.28%;
           height: 40px;
           background: #ececec;
           text-align: center;
       }

       button{
           width: 100px;
           height: 40px;
           font-size: 20px;
           float: left;
       }

       #month {
           text-align: center;
       }

       .qiandao {
           color: red;
       }

   </style>
</head>
<body>
<div class="home">
    <h1 id="month"></h1>
    <table cellspacing="1" cellpadding="1" class="home">
        <ul class="thead">
            <li>日</li>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
        </ul>
        <tbody id="tbody"></tbody>
    </table>
    <button id="button" style="float: left;">签到</button>
    <button id="button2" style="float: left;">签到天数</button>
    <button id="button3" style="float: left;">查询上月</button>
    <button id="button4" style="float: left;">返回</button>
</div>


<script>
    var localDate = {
        date: []
    }
    for(var j = 0; j < 30; j++) {
        var a = Math.ceil(Math.random() * 11);
        if(a < 10) {
            a = "0" + a;
        }
        var b = Math.ceil(Math.random() * 30);
        if(b < 10) {
            b = "0" + b;
        }
        var c = a.toString() + b.toString();
        localDate.date.push(c);
    }

    //初始化日期数据
    var slidate = new Date();
    var x = slidate.getMonth() + 1;
    var n = slidate.getMonth();
    var monthFirst = new Date(slidate.getFullYear(), parseInt(n), 1).getDay(); //获取当月的1日等于星期几
    var m = slidate.getMonth() + 1;
    var d = new Date(slidate.getFullYear(), parseInt(m), 0); //获取月
    var conter = d.getDate(); //获取当前月的天数
    var monthNum = "0" + (slidate.getMonth() + 1) + "月";
    var monthCheck = (slidate.getMonth() + 1);
    var y = slidate.getDate();

    function initall() {
        dateHandler(monthFirst, d, conter, monthNum);
        checkDate(monthCheck);
    }

    function dateHandler(monthFirst, d, conter, monthNum) {
        var u = 1;
        var blank = true;
        var $tbody = $('#tbody'),
            $month = $("#month"),
            _nullnei = '';
        var p = document.createElement("p");
        var monthText = document.createTextNode(monthNum);
        p.appendChild(monthText);
        $month.append(p);
        //遍历日历网格
        for(var i = 1; i <= 6; i++) {
            _nullnei += "<tr>";
            for(var j = 1; j <= 7; j++) {
                _nullnei += '<td></td>';
            }
            _nullnei += "</tr>";
        }
        $tbody.html(_nullnei);

        //遍历网格内容
        var $slitd = $tbody.find("td");
        for(var i = 0; i < conter; i++) {
            $slitd.eq(i + monthFirst).html("<p>" + parseInt(i + 1) + "</p>")
        }
        //给有日期的td加上id
        var dayBlock = document.getElementsByTagName("td");
        for(var i = 0; i < dayBlock.length; i++) {
            if(dayBlock[i].textContent != "") {
                dayBlock[i].setAttribute("id", "td" + u);
                u++;
            }
        }
        //若日期不足排满每一行的tr，则删除最后一个tr
        var blankTr = document.getElementsByTagName("tr");
        var blankTd = blankTr[5].getElementsByTagName("td");
        for(var i = 0; i < blankTd.length; i++) {
            if(blankTd[i].textContent != "") {
                blank = false;
            }
        }
        if(blank == true) {
            blankTr[5].remove();
        }
    }

    function checkDate(prep) {
        var dateArray = [];
        var newArray = [];
        //删除不是本月的日期
        for(var i = 0; i < localDate.date.length; i++) {
            dateArray.push(localDate.date[i]);
        }
        for(var i = 0; i < dateArray.length; i++) {
            if(dateArray[i].charAt(1) != prep) {
                dateArray[i] = undefined;
            }
        }
        for(var i = 0; i < dateArray.length; i++) {
            if(dateArray[i] != undefined) {
                newArray.push(dateArray[i]);
            }
        }
        //遍历数组为已签到日期添加class
        for(var i = 0; i < newArray.length; i++) {
            if(newArray[i].charAt(2) == 0) {
                for(var j = 0; j < 10; j++) {
                    if(newArray[i].charAt(3) == j) {
                        var checked = "#td" + j;
                        $(checked).addClass("qiandao");
                    }
                }
            } else if(newArray[i].charAt(2) == 1) {
                for(var j = 0; j < 10; j++) {
                    if(newArray[i].charAt(3) == j) {
                        var checked = "#td1" + j;
                        $(checked).addClass("qiandao");
                    }
                }
            } else {
                for(var j = 0; j < 10; j++) {
                    if(newArray[i].charAt(3) == j) {
                        var checked = "#td2" + j;
                        $(checked).addClass("qiandao");
                    }
                }
            }
        }
    }
    //当天签到添加样式
    $("#button").on("click", function() {
        $("tr").remove();
        $("p").remove();
        dateHandler(monthFirst, d, conter, monthNum);
        checkDate(monthCheck);
        var thisDay = "#td" + y;
        var checkPic = false;
        if(m > 10 && y < 10) {
            var thisBlock = m.toString() + y.toString();
        } else if(m < 10 && y > 10){
            var thisBlock = "0" + m.toString() + y.toString();
        }else if(m > 10 && y < 10){
            var thisBlock = m.toString() + "0" + y.toString();
        }else if(m < 10 && y < 10){
            var thisBlock = "0" + m.toString() + "0" + y.toString();
        }
        for(var e = 0; e < localDate.date.length; e++) {
            if(localDate.date[e] === thisBlock) {
                checkPic = true;
            }
        }
        if(checkPic == true) {
            alert("您今天已经签到了！");
        } else {
            $(thisDay).addClass("qiandao");
            alert("已签到！");
            localDate.date.push(thisBlock);
        }
    })

    //查询已签到天数
    $("#button2").on("click", function() {
        alert("您已经签到了" + localDate.date.length + "天！");
    })
    //查询历史记录
    $("#button3").on("click", function() {
        $("tr").remove();
        $("p").remove();
        if(m > 0 && n > 0) {
            m--, n--;
        }
        var monthFirst = new Date(slidate.getFullYear(), parseInt(n), 1).getDay(); //获取当月的1日等于星期几
        var d = new Date(slidate.getFullYear(), parseInt(m), 0); //获取月
        var conter = d.getDate(); //获取当前月的天数
        var monthNum = "0" + (m) + "月";
        var monthCheck = m;
        dateHandler(monthFirst, d, conter, monthNum);
        checkDate(monthCheck);
    })
    //返回上月记录
    $("#button4").on("click", function() {
        $("tr").remove();
        $("p").remove();
        if(m < x) {
            m++, n++;
        }
        var monthFirst = new Date(slidate.getFullYear(), parseInt(n), 1).getDay(); //获取当月的1日等于星期几
        var d = new Date(slidate.getFullYear(), parseInt(m), 0); //获取月
        var conter = d.getDate(); //获取当前月的天数
        var monthNum = "0" + (m) + "月";
        var monthCheck = m;
        dateHandler(monthFirst, d, conter, monthNum);
        checkDate(monthCheck);
    })

    window.addEventListener("load", initall, false);

</script>
</body>
